<template>
  <div class="m-footer">
    <div class="line flex-between">
      <div class="logo flex-left">
        <img :src="logo" alt />
        <p>{{ title }}</p>
      </div>
      <el-select
        v-model="lang"
        placeholder="Choose language"
        class="lang"
        size="small"
        @change="changeLang"
      >
        <el-option label="简体中文" value="zh"></el-option>
        <!-- <el-option label="日本語" value="ja"></el-option> -->
        <el-option label="English" value="en"></el-option>
      </el-select>
    </div>
    <p class="tip">{{ title }}{{ $t("footer.txt") }}</p>
  </div>
</template>

<script>
import locale from "element-ui/lib/locale"; //locale兼容
import enLocale from "element-ui/lib/locale/lang/en";
import zhLocale from "element-ui/lib/locale/lang/zh-CN";
import jaLocale from "element-ui/lib/locale/lang/ja";
export default {
  data() {
    return {
      lang:
        localStorage.getItem("BLOCK_LANG") || process.env.VUE_APP_DEFAULT_LANG,
    };
  },
  computed: {
    logo() {
      return require(`@/assets/img/logo${process.env.VUE_APP_LOGO_URL}`);
    },
    title() {
      return process.env.VUE_APP_BRAND_NAME;
    },
  },
  methods: {
    changeLang(lang) {
      // localStorage.setItem("BLOCK_LANG", lang);
      this.$store.commit("updateLang", lang);
      this.$i18n.locale = lang;
      switch (lang) {
        case "zh":
          locale.use(zhLocale);
          break;
        case "ja":
          locale.use(jaLocale);
          break;
        case "en":
          locale.use(enLocale);
          break;
        default:
          locale.use(zhLocale);
          break;
      }
    },
  },
};
</script>

<style lang="scss">
.m-footer {
  height: 105px;
  background: $white;
  padding: 20px;
  .logo {
    height: 100%;
    width: 200px;
    img {
      width: 30px;
      margin-right: 10px;
    }
    p {
      font-size: 16px;
      font-weight: 700;
      color: rgb(183, 183, 173);
    }
  }
  .lang {
    width: 115px;
    input {
      // height: 30px;
      background: rgba(194, 199, 222, 1);
      border-radius: 15px;
      color: #fff;
      border: none;
    }
    .el-select__caret {
      color: #fff !important;
    }
  }
  .tip {
    margin: 10px 0 10px;
    font-size: 12px;
    font-family: PingFangSC;
    font-weight: 400;
    color: $grey_deep;
    line-height: 17px;
  }
}
</style>